/**
 * Creates the base structure of HtmlEditor field.
 * @member Ext.form.field.HtmlEditor
 */
@mixin extjs-form-htmleditor {
  .#{$prefix}html-editor-wrap {
    border: 1px solid $html-editor-border-color;

    .#{$prefix}toolbar {
      border-top-width: 0;
      border-left-width: 0;
      border-right-width: 0;
    }

    textarea {
      background-color: $html-editor-background-color;
    }
  }

  .#{$prefix}html-editor-tb .#{$prefix}btn-text {
    background: transparent no-repeat;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-bold,
  .#{$prefix}menu-item img.#{$prefix}edit-bold {
    background-position: 0 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-italic,
  .#{$prefix}menu-item img.#{$prefix}edit-italic {
    background-position: -16px 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-underline,
  .#{$prefix}menu-item img.#{$prefix}edit-underline {
    background-position: -32px 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-forecolor,
  .#{$prefix}menu-item img.#{$prefix}edit-forecolor {
    background-position: -160px 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-backcolor,
  .#{$prefix}menu-item img.#{$prefix}edit-backcolor {
    background-position: -176px 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-justifyleft,
  .#{$prefix}menu-item img.#{$prefix}edit-justifyleft {
    background-position: -112px 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-justifycenter,
  .#{$prefix}menu-item img.#{$prefix}edit-justifycenter {
    background-position: -128px 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-justifyright,
  .#{$prefix}menu-item img.#{$prefix}edit-justifyright {
    background-position: -144px 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-insertorderedlist,
  .#{$prefix}menu-item img.#{$prefix}edit-insertorderedlist {
    background-position: -80px 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-insertunorderedlist,
  .#{$prefix}menu-item img.#{$prefix}edit-insertunorderedlist {
    background-position: -96px 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-increasefontsize,
  .#{$prefix}menu-item img.#{$prefix}edit-increasefontsize {
    background-position: -48px 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-decreasefontsize,
  .#{$prefix}menu-item img.#{$prefix}edit-decreasefontsize {
    background-position: -64px 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-sourceedit,
  .#{$prefix}menu-item img.#{$prefix}edit-sourceedit {
    background-position: -192px 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tb .#{$prefix}edit-createlink,
  .#{$prefix}menu-item img.#{$prefix}edit-createlink {
    background-position: -208px 0;
    background-image: theme-background-image($theme-name, 'editor/tb-sprite.gif');
  }

  .#{$prefix}html-editor-tip .#{$prefix}tip-bd .#{$prefix}tip-bd-inner {
    padding: 5px;
    padding-bottom: 1px;
  }

  .#{$prefix}html-editor-tb {
    .#{$prefix}toolbar {
      position: static !important;
    }

    .#{$prefix}font-select {
      font-size: 11px;
    }
  }

  .#{$prefix}html-editor-wrap textarea {
    border: 0;
    padding: 3px 2px;
    overflow: auto;
  }
}